<template>
	<view class="main">
		<u-toast ref="uToast"style="z-index: 999;"></u-toast>
		<!-- <text slot="title" class="u-page__item__title__slot-title">寄修详情</text> -->
		<u-datetime-picker :show="dateShow" v-model="value" mode="datetime" @confirm="dateConfirm"
			@cancel="dateShow = false" closeOnClickOverlay @close="dateShow = false"></u-datetime-picker>	
		<!-- 弹出层修改 -->
		<u-popup :show="editPopupShow" mode="center" @close="editPopupShow=false" :round="12" :customStyle="{width:'90%'}">
			<u-toast ref="uToastTwo"style="z-index: 999;"></u-toast>
				<!-- 客户类型 -->
			<view class="popup_content" v-if="popupCurrent==1">
				<view class="edit_type">
					<u-subsection
					:list="list" 
					:current="edit_type_current" 
					@change="changeType"
					mode="subsection" 
					>
					</u-subsection>
					<view class="city_selcet mar_top" v-show="edit_type_current === 0">
						<view class="flex flex_align flex_bet">
							<view class="city_input flex flex_align"><text class="mar_right">省</text>
								<view class="" style="width: 100%">
									<uni-data-select v-model="afterSale.user_province" :localdata="province"
										@change="provinceChange($event, 'city')">
									</uni-data-select>
								</view>
							</view>
							<view class="city_input flex flex_align"><text class="mar_right">市</text>
								<view class="" style="width: 100%">
									<uni-data-select v-model="afterSale.user_city" :localdata="city"
										@change="provinceChange($event, 'county')"></uni-data-select>
								</view>
							</view>
						</view>
						<view class="flex flex_align flex_bet mar_top">
							<view class="city_input flex flex_align"><text class="mar_right">县</text>
								<view class="" style="width: 100%">
									<uni-data-select v-model="afterSale.user_county" :localdata="county"
										@change="provinceChange($event, 'region')"></uni-data-select>
								</view>
							</view>
							<view class="city_input flex flex_align"><text class="mar_right">区</text>
								<view class="" style="width: 100%">
									<uni-data-select v-model="afterSale.user_area" :localdata="region"></uni-data-select>
								</view>
							</view>
						</view>
					</view>
					<view style="border-bottom: 1px solid #f3f3f3; height: 1px;margin: 10px auto;"></view>
					<u-button type="primary" text="确定" @click="confirmEditType" shape="circle" :customStyle="{width:'55%'}"></u-button>
				</view>
			</view>
			<!-- 产品型号 -->
			<view class="popup_content" v-if="popupCurrent==2">
				<view class="product_model">
					<view class="product_list" @click="productChange(item)" v-for="item in  productList" :key="item.id" :class="[item.id==repairList.product_model_id? 'product_active':'']">
						{{item.name}}
					</view>
					<view style="border-bottom: 1px solid #f3f3f3; height: 1px;margin: 10px auto;"></view>
					<u-button type="primary" text="确定" shape="circle" @click="confirmEditModel" :customStyle="{width:'55%'}"></u-button>
				</view>
			</view>
			<!-- 产品sn码 -->
			<view class="popup_content" v-if="popupCurrent==3">
				<view class="product_sn">
					<view class="sn">已填写的SN码:{{repairList.serial_number}}</view>
					 <u--input
							@input="forSpace($event,'editSn')"
					    placeholder="请输入修改SN码"
					    border="surround"
					    v-model="editSn"
							:customStyle="{margin:'20px 0',borderRadius:'20rpx',background:'#e9edf0',border:'none',padding:'20rpx 10rpx'}"
					  ></u--input>
						<view style="border-bottom: 1px solid #f3f3f3; height: 1px;margin: 10px auto;"></view>
						<u-button type="primary" text="确定" shape="circle" @click="confirmEditSn" :customStyle="{width:'55%'}"></u-button>
				</view>
			</view>
		</u-popup>
		<!-- 寄回清单型-故障类型弹窗 -->
		<options-box :show.sync="oneShow" :checkboxList="optionList" @popupConfirm="popupConfirm" :echoList="echoList" :textType="textType">
		</options-box>
		<!-- 故障描述弹窗 -->
		<u-popup :show="twoShow" @close="twoShow = false" :round="12" :closeable="true">
			<view class="desc_popup_content">
				<view class="top flex flex_align" >
					请输入故障描述<u-icon name="edit-pen-fill" size="18"></u-icon>
				</view>
				<view class="popup">
					<u--textarea v-model="faultObj.fault_desc" placeholder="请填写故障描述" border="none" height="80"
						style="z-index: 1;" maxlength="300" ></u--textarea>
						<view class="text_length">
							<text>{{faultObj.fault_desc.length}}/300</text>
						</view>
					<view class="mar_left mar_bottom">
						<view class="upload">
							<view class=" box box-align-center  upload" style="align-items: flex-end;display: flex;">
								<view class="upload_img" v-if="faultObj.fileList ">
									<text class="iconfont icon-jianhao1 delete" @click="deleteImg('file')"></text>
									<!-- 图片 -->
									<image class="apad_video" :src="uploadFlie"
										mode="aspectFit"></image>
								</view>
								<view class="iconfont icon-zengjia1 icon" @click="locaUpload"></view>
							</view>
						</view>
						<!-- <u-upload :fileList="faultObj.fileList" @afterRead="((event)=>{afterRead(event,index)})"
							@delete="deletePic" name="1" :maxCount="3" uploadText="上传图片"></u-upload> -->
					</view>
				</view>
				<view class="mar_top" style="padding: 0 100rpx;">
					<u-button type="primary" text="确定" hairline shape="circle" @click="finalConfirm"></u-button>
				</view>
			</view>
		</u-popup>
		<!-- 头部信息 -->
		<view class="header def_radius def_Font mar_bottom">
			<view class="type def_heg flex flex_bet flex_align bot_line pad_lr ">
				<view class="">
					<text class="iconfont icon-suijiyonghu"></text>
					<text class="">客户类型</text>
				</view>
				<view class="text_bg pos_re">
					{{repairList.customer_type == 1 ? '个人' :'代理商' }}<view class="small_Font edit" style="top:-30rpx;right:-30rpx;" v-if="isEdit" @click="popupOpen('1')">修改</view>
				</view>
			</view>
			<view class="send_info def_heg flex flex_bet flex_align pad_lr">
				<view class="">寄件信息</view>
				<view class="skyBlue" @click="productEdit" v-if="!isEdit">
					<view class="edit_btn">
						修改
					</view>
					<!-- <text v-if="!show">编辑</text> -->
					<!-- <text v-else @click="sendConfirm">完成</text> -->
				</view>
			</view>
			<!-- 显示信息 -->
			<view class="edit_show" v-if="!isEdit">
				<view class="send_title">
					<!-- 个人寄件 -->
					{{repairList.as_type == 1?'售后上门取件':'自主快递' }}
				</view>
			<view class="edit_send_info show_send_info" style="margin-top: 20rpx;">
				<view class="client_type mar_top flex flex_align mar_bottom"  v-if="repairList.as_type==1">
					<view class="header_star dateTime " style="width: 38%;">预约上门取件时间:</view>
					<view class="model  address_info">
						<view class="create_time">
							{{+new Date(repairList.pickup_start_time) | newDateTwo(type='rq')}}
						</view>
					</view>
				</view>
				<view class="express_right mar_top_middle">
					<view class="send flex flex_align flex_bet mar_bottom_middle">
						<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/send.png" mode="widthFix" style="width: 60rpx;"></image>
						<view class="name">
							<view class="title">{{editAddress.person.name}}<text>{{editAddress.person.phone}}</text></view>
							<view class="addr">{{editAddress.person.addr}}</view>
						</view>
						<view class="addr_list" @click="goToUrl('/pages/myAddress/index?selectAddress=confirm')">地址簿</view>
					</view>
					<view class="send_line" v-if="repairList.as_type !== 1"></view>
					<view class="send flex flex_align flex_bet mar_top_middle  mar_bottom" v-if="repairList.as_type !== 1">
						<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/put.png" mode="widthFix" style="width: 60rpx;"></image>
						<view class="name">
							<view class="title">{{editAddress.firm.name}} <text>{{editAddress.firm.phone}}</text></view>
							<view class="addr">{{editAddress.firm.addr}}</view>
						</view>
						<view class="addr_list" @click="goToUrl('/pages/afterAddress/index')">地址簿</view>
					</view>
				</view>
				<view class="client_type mar_top flex flex_align" v-if="repairList.as_type==2">
					<view class="header_star dateTime mar_right">快 递 单 号:</view>
					<view class="model  address_info">
						<view class="tracking_num">
							{{repairList.express_number ? repairList.express_number : '暂无'}}
						</view>
					</view>
				</view>
			</view>
			</view>
			
			<!-- 修改信息 -->
			<view class="edit_show" v-if="isEdit">
				<view class="edit_send_cont" style="width: 100%;">
					<view class="edit_send_sub">
						<u-subsection
						:list="sendWay" 
						:current="edit_send_current" 
						@change="changeSend"
						mode="button" 
						bgColor="#f4f4f4"
						inactiveColor="#898989"
						activeColor="#fff">
						</u-subsection>
					</view>
					<view class="" style="color: #759a65;padding: 10rpx 25rpx 0 25rpx;font-size: 24rpx;" v-if="edit_send_current === 0">
						*请优先选择售后上门取件！售后上门取件无任何手续费，您也无需预先支付快递费，将包裹给收件员即可！
					</view>
					<view class="" style="color: #759a65;padding: 10rpx 25rpx 0 25rpx;font-size: 24rpx;" v-if="edit_send_current === 1">
						*保内维修请使用【售后快递上门取件】；自主快递需您打包后自行联系快递公司寄出，并按提示填写快递单号！
					</view>
					<view class="edit_send_info">
						<view class="client_type mar_top flex flex_align mar_bottom"  v-if="edit_send_current==0">
							<view class="header_star dateTime " style="width: 38%;">预约上门取件时间:</view>
							<view class="model mar_left address_info" @click.stop="dateShow = true">
								<u-input v-model="dateValue" :fontSize="12" placeholder="请选择取件时间"
									border="surround" suffixIcon="arrow-down" disabled>
								</u-input>
								<!-- <u-input v-model="repairList.create_time" :fontSize="12" placeholder="请选择取件时间"
									border="surround" suffixIcon="arrow-down" disabled>
								</u-input> -->
							</view>
						</view>
						<view class="express_right">
							<view class="send flex flex_align flex_bet">
								<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/send.png" mode="widthFix" style="width: 60rpx;"></image>
								<view class="name">
									<view class="title">{{editAddress.person.name}}<text>{{editAddress.person.phone}}</text></view>
									<view class="addr">{{editAddress.person.addr}}</view>
								</view>
								<view class="addr_list" @click="goToUrl('/pages/myAddress/index?selectAddress=confirm')">地址簿</view>
							</view>
							<view class="send_line" v-if="edit_send_current!==0"></view>
							<view class="send flex flex_align flex_bet " v-if="edit_send_current!==0">
								<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/put.png" mode="widthFix" style="width: 60rpx;"></image>
								<view class="name">
									<view class="title">{{editAddress.firm.name}} <text>{{editAddress.firm.phone}}</text></view>
									<view class="addr">{{editAddress.firm.addr}}</view>
								</view>
								<view class="addr_list" @click="goToUrl('/pages/afterAddress/index')">地址簿</view>
							</view>
						</view>
						<view class="client_type mar_top flex flex_align"  v-if="edit_send_current==1">
							<view class="header_star" style="width: 180rpx;color: #de6e67;font-weight: 700;">快 递 单 号：</view>
							<u--input v-model="repairList.express_number" 
							placeholder="请输入快递单号" 
							border="bottom" 
							placeholder-style="color:#de6e67"
							:custom-style="{background:'#f1f2f4', height:'50rpx',lineHeight:'50rpx',border:'none',borderRadius:'10rpx',}" 
							clearable>
							</u--input>
							<view class="camera iconfont icon-xiangji" @click="uploadImg" style="z-index: 2;"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 详情 -->
		<view class="detail def_radius def_Font pad_lr mar_bottom">
			<view class="flex def_heg bot_line">
				<view class="text_lab">产品型号</view>
				<view class="pos_re">{{repairList.product_model}}<view class="small_Font edit" style="right: -80rpx;top: 5rpx;" v-if="isEdit" @click="popupOpen('2')">修改</view></view>
			</view>
			<view class="flex def_heg bot_line">
				<view class="text_lab">产品SN码</view>
				<view class="pos_re">{{repairList.serial_number}}<view class="small_Font edit" style="right: -80rpx;top: 5rpx;" v-if="isEdit" @click="popupOpen('3')">修改</view></view>
			</view>
			<view class="flex pad_tb_big bot_line">
				<view class="text_lab">寄回清单</view>
				<view class="mall_list pos_re">
					<view class="list_text_bg" v-for="(item,i) in editProductList" :key="i">{{item.name}}</view>
					<view class="small_Font edit" style="right: 0;bottom: -38rpx;" v-if="isEdit" @click="openShow('product_name')">修改</view>
				</view>
			</view>
			<view class="flex pad_tb_big bot_line">
				<view class="text_lab">故障类型</view>
				<view class="mall_list pos_re">
					<view class="list_text_bg" v-for="(item,i) in editFaultList" :key="i">{{item.name}}</view>
					<view class="small_Font edit" style="right: 0;bottom: -38rpx;" v-if="isEdit" @click="openShow('fault_name')">修改</view>
				</view>
			</view>
			<view class="flex pad_bottom pad_top">
				<view class="text_lab">故障描述</view>
				<view class="remark pos_re">
					<view class="remark_txt">{{repairList.fault_desc}}</view>
					<view class="remark_img"  @click="hintShowType(uploadFlie ? uploadFlie : repairList.fault_file_url)">
						<image :src="uploadFlie ? uploadFlie : repairList.fault_file_url ? repairList.fault_file_url : defImg"></image>
						<view class="mask"></view>
					</view>
					<view class="small_Font edit" style="right: 0;bottom: -15rpx;" v-if="isEdit"@click="openFilalShow()">修改</view>
				</view>
			</view>
		</view>
		
		<!-- 底部操作 -->
		<view class="footer_client_type  mar_top excel flex flex_align flex_bet">
			<view class="box box_redius" @click="noDone"><text class="iconfont icon-zengjia1"></text>添加产品</view>
			<view class="box box_redius" @click="noDone"><text class="iconfont icon-piliangdaoru"></text>批量导入excel</view>
		</view>
		
		<view class="footer_btn flex flex_bet flex_align pad_bottom_middle pad_top_middle">
			<!-- <u-button type="info" plain="true" customStyle="width:30%" shape="circle" @click="productEdit">修改</u-button> -->
			<u-button type="primary" shape="circle" customStyle="width:60%" :disabled="!isEdit" @click="confirm">提交</u-button>
		</view>
	</view>
</template>

<script>
	import {
		repairById,
		repairEdit
	} from '@/api/repair.js'
	import {
		mapState
	} from 'vuex'
	import {
		dateNew
	} from '@/utils/index.js'
	import {
		productList,
		productmodelList,
		faultList
	} from '@/api/product.js'
	import {
		userAddressList,
	} from '@/api/address.js'
		import optionsBox from '@/components/optonsBox.vue'
		import QQMapWX from '@/utils/qqmap-wx-jssdk.js'
	export default {
		computed: {
			...mapState([
				'afterSale',
				'editAddress',
				'address'
			]),
			optionList() {
				return this.optionText === 'product_name' ? this.checkboxList : this.faultList
			},
			inventory() {
				if (this.repairList.product_name) {
					return this.repairList.product_name.split(',')
				}
			},
			faultType() {
				if (this.repairList.fault_name) {
					return this.repairList.fault_name.split(',')
				}
			},
			//预约上门格式化时间
			dateValue(){
				if(!this.afterSale.pickup_start_time) return ''
				let date = new Date(parseInt(this.value));
				let y = date.getFullYear();
				let m = (date.getMonth() + 1 + '').padStart(2, '');
				let d = (date.getDate() + '').padStart(2, '0');
				let h = date.getHours();
				let minute = date.getMinutes();
				let second = date.getSeconds();
				minute = minute < 10 ? "0" + minute : minute;
				second = second < 10 ? "0" + second : second;
				return `${y}年${m}月${d}日 ${h}:${minute}`
			}
		},
		components:{
			optionsBox
		},
		watch:{
			editSn(val){
				this.editSn=val.replace(/\s+/g,"")
			}
		},
		data() {
			return {
				repairList: {},
				fileList: [],
				id: 0,
				clickable: '',
				checkboxList: [],
				faultList: [],
				list: ['代理商', '个人'],
				sendWay:['售后上门取件','自主寄出'],
				show:false,
				active:0,
				dateShow: false,
				value: Number(new Date()),
				edit_send_current:0, //编辑时的选中
				isEdit:false,
				defImg:'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/notimg.png', //默认图片
				createTime:0, //时间戳
				// editExpImg:'',//快递单号图地址
				// editExpNum:'',//快递单号
				popupCurrent:0,//弹出第几个修改框
				editPopupShow:false,//控制弹出框显示隐藏
				edit_type_current:0, //修改客户类型
				productList:[],
				editModel:'',//型号修改
				editSn:'',//sn码修改
				oneShow: false,
				echoList: [],
				optionText: '',
				//修改
				editProductList:[],
				editFaultList:[],
				editEchoList:{
					product_name:[],
					fault_name:[]
				},
				//地址
				qqmapsdk: null,
				province: [], //省
				city: [], //市
				region: [], //区
				county: [], //县
				twoShow: false,
				faultObj: {
					fault_desc: '',
					fileList: ''
				},
				// 文件路径
				uploadFlie:'',
				uploadType:'',
				textType:0,
				sign_time:'',
				// cityList:[]
			}
		},
		onLoad(option) {
			console.log('id', option, this.repairList)
			this.sign_time = option.sign_time
			if(option.is_edit){
				console.log('12315151516',option.is_edit);
				this.isEdit= true
			}
			if (option.id) {
				this.id = option.id
				this.getrepairById(option.id)
			}
			this.qqmapsdk = new QQMapWX({
				key: '3UIBZ-WUHY3-PHT33-YXSF5-5VFHK-3BFS5'
			});
			this.getCityList()
			this.afterSale.pickup_start_time='' //清除
		},
		onShow() {
			// repairList.customer_type == 1 ? 1 : 0
			this.getproductList()
			this.getproductmodelList()
			this.getfaultList()
			this.getuserAddressList()
		},
		methods: {
			//判断数据是否为空值，为空返回true,有值为false
			isNull(data) {
				if (!data) return true;
				if (JSON.stringify(data) === '{}') return true;
				if (JSON.stringify(data) === '[]') return true;
				return false;
			},
			getuserAddressList() {
				userAddressList().then(res => {
					res.data.forEach(item=>{
						if(item.name == this.editAddress.person.name && item.phone == this.editAddress.person.phone && item.addr == this.editAddress.person.addr ){
							console.log(item,'重新获取全部地址');
							return this.editAddress.person.id = item.id
						}
					})
				})
			},
			//获取寄回清单
			getproductList() {
				productList().then(res => {
					console.log(res.data,'清单');
					this.checkboxList = res.data.map(item => ({
						text: item.name,
						value: item.name
					}))
				})
			},
			//故障类型
			getfaultList() {
				faultList().then(res => {
					console.log(res.data,'故障类型');
					this.faultList = res.data.map(item => ({
						text: item.name,
						value: item.name
					}))
				})
			},
			//寄回清单确定
			popupConfirm(item) {
				console.log(item,'1222222');
				let storeName = ''
				if (this.optionText === 'product_name') {
					//修改寄回清单
					// storeName = 'editProduct_name'
					this.editEchoList.product_name = item[0] == ""? [] :item
					this.editProductList = this.editEchoList.product_name.map(item => ({
						'name': item
					}))
					console.log(this.editProductList,'处理完');
				} else {
					//修改故障类型
					// storeName = 'editFault_name'
					this.editEchoList.fault_name = item[0] == ""? [] :item
					this.editFaultList = this.editEchoList.fault_name.map(item => ({
						'name': item
					}))
					console.log('确认的清单',JSON.parse(JSON.stringify(this.editFaultList)));
				}
				// this.$store.commit(storeName, {
				// 	index: 0,
				// 	val: item
				// })
				// this.editEchoList[storeName] = item
				this.oneShow = false
			},
			//选择弹出层选项
			openShow(type) {
				if(type=='product_name'){
					this.textType = 1
				}else{
					this.textType = 2
				}
				this.optionText = type //打开得到框
				// this.echoList = this.editEchoList[0][type]//回显
				// console.log(this.editEchoList[type],'弹出');
				let arr = this.editEchoList[type]
				this.echoList = arr.toString().split(',')
				this.oneShow = true
				// console.log(this.echoList,'处理后的数据');
				this.optionList.forEach((item,i)=>{
					if(item.value.includes('SIM')||item.value.includes('TF')){
						return item['disable'] = true
					}
				})
			},
			//控制弹出框
			popupOpen(idx){
				console.log(idx);
				this.editPopupShow = true
				this.popupCurrent = idx
			},
			dateConfirm(val) {
				let date = dateNew(val.value)
				this.$store.commit('editTime', date)
				this.dateShow = false
			},
			//跳转
			goToUrl(url) {
				if(!this.isEdit) return
				uni.navigateTo({
					url: url + '?selectAddress=confirm'
				});
			},
			//寄件信息切换编辑状态
			showEdit(){
				if(this.sign_time!=='undefined') return this.$refs.uToast.show({
						message: '订单已签收不可修改！',
						icon: false,
						type: 'error',
				})
				this.show = !this.show
			},
			//编辑
			productEdit(){
				if(this.sign_time!=='undefined') return this.$refs.uToast.show({
						message: '订单已签收不可修改！',
						icon: false,
						type: 'error',
				})
				this.isEdit = !this.isEdit
				// this.show = this.isEdit
			},
			//寄修编辑
			confirm() {
				const productStr = []
				this.editProductList.forEach((item)=>{
					return productStr.push(item.name)
				})
				const faultStr=[]
				this.editFaultList.forEach((item)=>{
					return faultStr.push(item.name)
				})
				console.log(this.editAddress.person,"寄件地址");
				let params = {
					id: this.id,
					//快递单号
					express_number: this.repairList.express_number,
					//快递照片
					express_number_img: this.fileList.url,
					//寄件地址id
					user_address_id: this.editAddress.person.id,
					//收件地址id
					address_id: this.afterSale.address_id,
					//寄件方式
					as_type:this.edit_send_current+1,
					// 取件日期
					pickup_start_time:this.afterSale.pickup_start_time,
					//修改客户类型
					customer_type:this.repairList.customer_type,
					//省
					user_province:this.afterSale.user_province,
					//市
					user_city:this.afterSale.user_city,
					//区
					user_county:this.afterSale.user_county,
					//街道
					user_area:this.afterSale.user_area,
					//产品型号
					product_model_id:this.repairList.product_model_id,
					//sn码
					serial_number:this.repairList.serial_number,
					//寄回清单
					product_name:productStr.join(","),
					// 故障类型
					fault_name:faultStr.join(","),
					//故障描述图片
					fault_file:this.repairList.fault_file,
					// 故障描述
					fault_desc:this.repairList.fault_desc
				}
				console.log(params.product_name);
				if(params.as_type == 1){
					if(this.isNull(params.pickup_start_time)) return this.$refs.uToast.show({
						message: '信息不全，请填写完整在提交！',
						type: 'error',
						icon: false
					})
				}
				if(params.as_type==2){
					if(this.isNull(params.express_number)) return this.$refs.uToast.show({
						message: '信息不全，请填写完整在提交！',
						type: 'error',
						icon: false
					})
					if(!/^[\da-z]+$/i.test(params.express_number))return this.$refs.uToast.show({
						message: '快递单号请勿填写无效数据类型！',
						type: 'error',
						icon: false
					})
				}
				// if(params.customer_type==2){
						// if(this.isNull(params.user_province) || this.isNull(params.user_city) || this.isNull(params.user_county) ||this.isNull(params.user_area)) return this.$refs.uToast.show({
						// 	message: '信息不全，请填写完整在提交！',
						// 	type: 'error',
						// 	icon: false
						// })
				// }
				
				if(this.isNull(params.product_name) || this.isNull(params.fault_name) || this.isNull(params.fault_desc) || this.isNull(params.serial_number)) return this.$refs.uToast.show({
					message: '信息不全，请填写完整在提交！',
					type: 'error',
					icon: false
				})
				this.isEdit = false
				// this.show = false
				console.log(params,'编辑之后的信息');	
				repairEdit(params).then(res => {
					this.getrepairById(params.id)
					this.$refs.uToast.show({
						message: res.msg,
						icon: false,
						type: 'success',
						complete: function() {
							uni.navigateBack({
								delta: 1
							})
						}
					})
				}).catch(err => {
					this.$refs.uToast.show({
						message: err.msg,
						type: 'error',
						icon: false
					})
				})
			},
			//寄修申请记录
			getrepairById(id) {
				repairById({
					id: id
				}).then(res => {
					this.getuserAddressList()
					this.editEchoList.fault_name = [res.data.fault_name]
					this.editEchoList.product_name = [res.data.product_name]
					this.editProductList = res.data.product_name.split(',').map(item => ({
						'name': item
					}))
					this.editFaultList = res.data.fault_name.split(',').map(item => ({
						'name': item
					}))
					console.log('寄修申请记录', res.data)
					this.repairList = res.data
					if(res.data.as_type == 3){
						this.edit_send_current = 1 //设置暂存时候的寄件方式默认值
					}else{
						this.edit_send_current = res.data.as_type - 1//设置寄件方式的默认值
					}
					if(res.data.customer_type==2){
						this.edit_type_current = 0
						
					}else{
						this.edit_type_current = res.data.customer_type
					}
					console.log(this.edit_type_current,'-----------');
					//寄出和寄回地址回显
					this.$store.commit('editAddress', {
						name: res.data.user_man,
						addr: res.data.user_address,
						phone: res.data.user_phone
					})
					this.$store.commit('editFirmAddress', {
						name: res.data.return_man,
						addr: res.data.return_address,
						phone: res.data.return_phone
					})
					if (res.data.express_number_img) {
						this.fileList = [{
							url: res.data.express_number_img_url,
							status: 'success'
						}]
					}
				}).catch(err => {
					this.repairList = {}
				})
			},
			//删除图片
			deletePic(index) {
				this.fileList.splice(index, 1)
			},
			//替换图片
			replaceImg(fullurl) {
				this.fileList = [{
					url: fullurl,
					status: 'success'
				}]
			},
			// 修改寄件方式分段器
			changeSend(e){
				console.log(e);
				// this.repairList.customer_type = e
				this.edit_send_current = e
			},
			// 修改客户类型分段器
			changeType(e){
				console.log(e);
				// this.repairList.customer_type = e
				this.edit_type_current = e
			},
			//上传快递单号图片
			uploadImg() {
				let that = this
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: 'https://service.jiaoguanyi.com.cn/api/common/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								'token': that.$store.state.token
							},
							success: (res) => {
								let data = JSON.parse(res.data)
								if (data.code === 200) {
									this.fileList.url = data.data.url
									// this.repairList.fault_file_url = data.data.url
									// console.log(res);
									// that.$store.commit('editNumberImg', data.data.url)
									this.$refs.uToast.show({
										message: '图片上传成功',
										icon: false,
										type: 'success'
									})
								} else {
									this.$refs.uToast.show({
										message: data.msg,
										icon: false,
										type: 'error'
									})
								}
							},
							fail: (err) => {
								this.$refs.uToast.show({
									message: err.msg,
									type: 'error',
									icon: false
								})
							}
						});
					}
				});
			},
			//获取省份数据
			getCityList() {
				let that = this
				that.qqmapsdk.getCityList({
					success: function(res) { //成功后的回调
						//console.log('省份数据：', res.result[0]); //打印省份数据
						that.province = res.result[0].map(item => ({
							value: item.id,
							text: item.fullname
						}))
					},
					fail: function(error) {
						//console.error('error111', error);
					},
					complete: function(res) {
						//console.log('res111', res);
					}
				})
			},
			//省份改变
			provinceChange(val, type) {
				if (val) {
					this.getcityId(val, type)
				}
			},
			// 传入对应省份ID获得城市数据，传入城市ID获得区县数据,依次类推
			getcityId(id, data) {
				let that = this
				that.qqmapsdk.getDistrictByCityId({
					id: id,
					success: function(res) { //成功后的回调
						that[data] = res.result[0].map(item => ({
							value: item.id,
							text: item.fullname
						}))
						console.log('对应城市ID下的区县数据：', that[data]);
					},
					fail: function(error) {
						console.log('---', error)
						that.$refs.uToast.show({
							message: '获取失败',
							type: 'error',
							icon: false
						})
					}
				})
			},
			//客户类型修改
			confirmEditType(){
				if(this.edit_type_current == 0){
					// let af = this.afterSale
					// if(!af.user_province && !af.user_city && !af.user_county) return
					this.repairList.customer_type = 2
					this.editPopupShow = false
				}else{
					this.repairList.customer_type = 1
					this.editPopupShow = false
				}
			},
			//产品型号
			getproductmodelList() {
				productmodelList().then(res => {
					console.log(res.data,'123465');
					this.productList = res.data
				})
			},
			//改变当前选择的项
			productChange(item){
				this.repairList.product_model_id = item.id
				this.editModel = item.name
				console.log(item,'型号');
			},
			//确认修改sn
			confirmEditSn(){
				// console.log(this.isNull(this.editSn));
				// if(this.isNull(this.editSn)) return this.$refs.uToast.show({
				// 	message: '请填写SN！',
				// 	type: 'error',
				// 	icon: false
				// })
				if(!/^[\da-z]+$/i.test(this.editSn))return this.$refs.uToastTwo.show({
					message: '请勿填写无效数据类型！',
					type: 'error',
					icon: false,
					position:'top'
				})
				this.repairList.serial_number = this.editSn ?  this.editSn :this.repairList.serial_number 
				this.editPopupShow = false
			},
			//确认修改型号
			confirmEditModel(){
				this.repairList.product_model = this.editModel ? this.editModel : this.repairList.product_model
				this.editPopupShow = false
			},
			//故障描述修改
			openFilalShow() {
				this.faultObj.fault_desc = this.repairList.fault_desc
				this.faultObj.fileList = this.repairList.fault_file
				this.uploadFlie = this.repairList.fault_file_url
				// this.partIndex = index
				this.twoShow = true
			},
			// 故障描述确认
			finalConfirm() {
				this.repairList.fault_desc = this.faultObj.fault_desc
				this.repairList.fault_file = this.faultObj.fileList 
				this.twoShow = false
			},
			hintShowType(type) {
				// this.hintShow = true
				console.log(type);
				if(!type) return uni.$u.toast('未上传图片')
				uni.previewImage({
					// 先filter找出为图片的item，再返回filter结果中的图片url
					urls: [type],
					fail() {
						uni.$u.toast('预览图片失败')
					},
				})
			},
			//选取本地相册
			locaUpload(){
				let that = this
				console.log('本地相册');
				uni.chooseMedia({
				  count: 2,
				  mediaType: ['image','video'],
				  sourceType: ['album', 'camera'],
				  maxDuration: 10,
				  camera: 'back',
				  success(res) {
				    console.log(res)
					that.uploadType = res.tempFiles[0].fileType
					let type = res.tempFiles[0].fileType == 'video' ? '.mp4' : '.png'
					uni.showLoading({
						title: '上传中'
					});
					uni.uploadFile({
							url: 'https://service.jiaoguanyi.com.cn/api/common/upload', // 图片上传
							filePath: res.tempFiles[0].tempFilePath,
							name: 'file',
							header: {
								'token': that.$store.state.token
							},
							success(res) {
								console.log(res)
								let data = JSON.parse(res.data)
								that.faultObj.fileList  = data.data.url
								that.repairList.fault_file = data.data.url
								that.uploadFlie = data.data.fullurl
								// fault_file_url
							}
						})
						
				  }
				})
			},
			//删除图片
			deleteImg(url) {
				if (url === 'file') this.uploadType = ''
				this.faultObj.fileList = ''
				this.repairList.fault_file=''
				this.repairList.fault_file_url = ''
				this.uploadFlie = ''
			},
			noDone(){
				this.$refs.uToast.show({
					message: '功能暂未开放！',
					type: 'info',
					icon: false
				})
			},
			//清除空格
			forSpace(e,type){
				/*这个正则表示的是输入框前后不得有空格*/
				this[type] = e.replace(/\s+/g,"")
				console.log(e);
			}
		},
	}
</script>
<style lang="scss" scoped>
	 .edit_send_sub /deep/.u-subsection {
		padding: 0;
		 .u-subsection__bar{
			height: 32px;
			background-color: #2e82ff !important;
		}
	}
	.text_lab{
		width: 30%;
	}
	.def_heg{
		height: 100rpx;
		line-height: 100rpx;
	}
	.pad_lr{
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
	.bot_line{
		border-bottom: 1px solid #f4f4f4;
	}
	.mar{
		margin: 10rpx;
	}
	.def_radius{
		border-radius: 20rpx;
		background-color: #fff;
	}
	.small_Font{
		font-size: 22rpx;
	}
	.def_Font{
		font-size: 26rpx;
	}
	.skyBlue{
		color: #fff;
		.edit_btn{
	    padding: 0rpx 40rpx;
      height: 60rpx;
      line-height: 60rpx;
      background-color: #4f8afe;
			border-radius: 10rpx;
		}
		
	}
	.text_bg{
		background-color: #f4f4f4;
		padding: 5rpx 10rpx;
		// height: none;
	}
	.list_text_bg{
		display: inline-block;
		// height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		color: #666666;
		border-radius: 10rpx;
		background: #eaeaea;
		font-size: 24rpx;
		padding: 5rpx 10rpx;
	}
	.pos_re{
		position: relative;
	}
	.pad_tb_big{
		padding: 45rpx 0;
	}
	.edit{
		position: absolute;
		height: 35rpx;
		line-height: 35rpx;
		padding: 0 10rpx ;
		color: #69a3ff;
		border-radius: 10rpx;
		border: 1px solid #69a3ff;
		font-size: 22rpx;
	}
	.main {
		// 顶部
		.header{
			.edit_show{
				border: 1px solid #c4cbdd;
				border-radius:20rpx;
			}
			.edit_send{
				margin: 40rpx 0;
			}
			.edit_send_cont{
				.edit_send_sub{
					padding: 0 20%;
					margin-top: -5%;
				}
			}
		}
		.send_title{
			padding: 20rpx 0 10rpx 0;
			margin: 0 10rpx;
			border-bottom: 1px solid #f1f2f4;
			color: #000;
			font-weight: 600;
		}
		.show_send_info{
			.create_time,.tracking_num{
				background-color: #f1f2f4;
				padding: 20rpx;
				border-radius: 10rpx;
				font-weight: 600;
			}
		}
		// 下部内容
		.detail{
			.mall_list{
				display: grid;
				grid-gap: 20rpx;
				grid-template-columns: repeat(2,230rpx);
			}
			.remark{
				width: 65%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				background-color: #f1f2f4;
				padding: 20rpx;
				border-radius: 20rpx;
				.remark_txt{
					margin-bottom: 20rpx;
					color: #666666;
				}
				.remark_img{
					position: relative;
					width: 120rpx;
					height: 180rpx;
					border-radius: 10rpx;
					overflow: hidden;
					image{
						width: 100%;
						height: 100%;
					}
					.mask{
						position: absolute;
						top: 0;
						width: 100%;
						height: 100%;
						background-color: rgba(0, 0, 0, .2);
					}
				}
			}
		}
		//底部内容
		.footer_client_type{
			.box{
				width: 42%;
				padding: 40rpx 20rpx;
				text-align: center;
			}
		}
		.footer_btn{
			margin-top: 50rpx;
		}
	}
	.edit_send_info{
		margin: 40rpx 20rpx;
	}
	.express_right {
		.send {
			letter-spacing: 2rpx;
			margin: 40rpx 0;
			.name {
				width: 60%;
	
				.title {
					color: #000;
					font-size: 26rpx;
					line-height: 40rpx;
					
					text {
						color: #000;
						font-size: 24rpx;
						margin-left: 10rpx;
					}
	
					.addr {
						color: #808080;
						font-size: 24rpx;
					}
				}
			}
		}
	
		.addr_list {
			width: 22%;
			text-align: center;
			border-left: 2rpx solid #f2f2f2;
			color: #808080;
			font-size: 24rpx;
			margin-left: 10rpx;
		}
	
		.send_line {
			border-bottom: 2rpx solid #f2f2f2;
			// margin: 40rpx 0;
		}
	}
	.client_type {
		position: relative;
		overflow: visible;
		.type{
			width: 60%;
			/deep/.u-subsection {
				padding: 0;
				.u-subsection__bar{
					height: 32px;
					background: #2e82ff;
				}
			}
		}
		.dateTime{
			width: 25%;
			// font-size: 
		}
		.model{
			width: 75%;
		}
		.type {
			width: 80%;
		}
	
		.city_input {
			width: 45%;
		}
	
		.address_icon {
			width: 25%;
			text-align: center;
			border-left: 1rpx solid #E6E6E6;
			margin-left: 30rpx;
	
			text {
				font-size: 100rpx;
			}
		}
	
		.address_info {
			flex: 1;
	
			.title {
				line-height: 40rpx;
			}
		}
	
		.box {
			width: 49%;
			text-align: center;
		}
	
		.line {
			border-right-width: 0.5px !important;
			border-color: #dadbde !important;
			border-right-style: solid;
			height: 40rpx;
		}
	
		.camera {
			position: absolute;
			top: 10rpx;
			right: 0;
			font-size: 60rpx;
			width: 15%;
			text-align: center;
		}
	
	}
	
	//修改时
	.popup_content{
		// padding: 20px 40px;
		width: 80%;
		margin: 20px auto;
	}
	.edit_type /deep/.u-subsection {
		padding: 0;
		 .u-subsection__bar{
			 width: 50% !important;
			height: 32px;
			background-color: #2e82ff !important;
		}
	}
	.city_input {
		width: 45%;
	}
	//产品型号
	.product_model{
		.product_list{
			padding: 10px 0;
			color: #555;
			font-size: 28rpx;
			text-align: center;
		}
	}
	.product_active{
		border: 1px solid #f3f3f3;
		border-radius: 10px;
	}
	.product_sn{
		font-size: 28rpx;
		color: #555;
		.u--input{
			border-radius: 20rpx;
			margin: 10px;
		}
	}
	
	.desc_popup_content {
		padding: 20px 20px 40px 20px;
		.top{
			font-size: 26rpx;
			margin-top: -10rpx;
		}
		.popup {
			position: relative;
			margin-top: 20rpx;
			border: 1px solid #b0b8ef;
			border-radius: 20rpx;
			overflow: hidden;
			.text_length{
				position: absolute;
				right: 20rpx;
				bottom: 25rpx;
				color: #a7a7a7;
				font-size: 24rpx;
			}
	}
	}
	.upload{
		position: relative;
	}
	.hint{
		position: absolute;
		left: 180rpx;
		bottom: 0;
		font-size: 22rpx;
		color: #5d5c5c;
	}
	.upload {
			border-radius: 12px;
			font-size: 25px;
			.icon {
				display: inline-block;
				font-size: 25px;
				background-color: #f8f8f8;
				border-radius: 12px;
				padding: 28px;
				z-index: 5;
			}
			.upload_img {
				position: relative;
				width: 81px;
				height: 81px;
				margin-right: 40rpx;
				.delete {
					position: absolute;
					background-color: #E5404F;
					color: #fff;
					padding: 10rpx;
					border-radius: 50%;
					top: -10px;
					right: -10px;
					z-index: 2;
				}
			}
			.apad_video {
				height: 81px;
				width: 81px;
				border-radius: 12rpx;
				overflow: hidden;
			}
		}
</style>
